import { NavLink } from 'react-router-dom';
import './index.scss';
import MySearch from './MySearch';
import MyHeadDropdown from './MyDropdown';

const menuList = [
  {
    title: '首页',
    url: 'home',
  },
  {
    title: '文章',
    url: 'article',
  },
  // {
  //   title: '讨论',
  //   url: 'discuss',
  // },
];

function MyHead() {
  return (
    <div className='my-head'>
      <div className='container'>
        <div className='left-wrapper'>
          <div className='logo'>水晶世界</div>
          <div className='menu'>
            {menuList.map((item, index) => {
              return (
                <NavLink
                  key={index}
                  to={item.url}
                  className={({ isActive }) => (isActive ? 'myActive' : '')}
                >
                  {item.title}
                </NavLink>
              );
            })}
          </div>
        </div>
        <MyHeadDropdown></MyHeadDropdown>
        <MySearch className='small-screen-hide'></MySearch>
      </div>
    </div>
  );
}

export default MyHead;
